<!--
 * @Description: 订单详情
 * @Author: py
 * @Date: 2024-08-13
-->
<script setup lang="ts" name="life-mall-order-details">
import { orderDetailsApi } from '@fl/api/city-service'
import { formatTime } from '@fl/utils'
import { useRouter } from 'vue-router'

import DeliveryDialog from './components/delivery-dialog.vue'
import ShipmentsDialog from './components/shipments-dialog.vue'
import { useDicts } from './hooks/use-dicts'
import { useTable } from './hooks/use-table'

const { detailsGridOptions } = useTable()
const { getDictLabel } = useDicts()
const router = useRouter()

const showDelivery = ref<boolean>(false)
const showShipments = ref<boolean>(false)
const detailId = ref<string>('')
const detailData = ref<any>({})
const orderLineId = ref(0)

const { query } = useRoute()
const { orderId } = query

const isFormLoading = ref(false)
const orderData = ref<any>({})
const timelineDatas = ref<any[]>([])

const currentProcessId = computed(() => timelineDatas.value.findIndex((item: any) => item.processDateTime === ''))

function getOrderDetails() {
    isFormLoading.value = true
    orderDetailsApi({
        orderId, // 订单id
    }).then((data) => {
        orderData.value = data
        detailsGridOptions.data = data.skuOrderList

        timelineDatas.value = data.orderTime.map((processItem) => {
            const processDateTime = processItem.processDateTime ? formatTime(processItem.processDateTime as string, 'yyyy-MM-dd HH:mm:ss') : ''
            return {
                processDateTime,
                processName: processItem.processName,
            }
        })
    }).finally(() => {
        isFormLoading.value = false
    })
}

getOrderDetails()

function doCopy() {
    const range = document.createRange()
    const Url2: any = document.getElementById('orderId')
    range.selectNode(Url2) // 选择对象
    const selection: any = window.getSelection()
    if (selection.rangeCount > 0)
        selection.removeAllRanges()
    selection.addRange(range)
    document.execCommand('copy')
    ElMessage.success('已复制好，可贴粘。')
    selection.removeRange(range) // 移除选中的元素
}

// 商品详情
function toGoodsDetail(row: any) {
    router.push({
        name: 'commodity-detail',
        params: {
            id: row.spuId,
            pageType: 'detail',
        },
    })
}
// 配送详情
// function lookDelivery(row: any) {
//     detailId.value = row.id
//     detailData.value = { ...row }
//     showDelivery.value = true
// }
// 确认发货
function clickShipmentsBtn(row: any, oId: number) {
    detailData.value = { ...row }
    orderLineId.value = oId
    showShipments.value = true
}
</script>

<template>
    <el-card>
        <template #header>
            <div class="flex relative justify-center">
                <el-button class="absolute left-0"
                           @click="$router.go(-1)"
                >
                    返回列表
                </el-button>

                <span class="text-20">订单详情</span>
            </div>
        </template>

        <el-skeleton v-if="isFormLoading"
                     animated
        />

        <template v-else>
            <el-steps :active="currentProcessId"
                      align-center
                      mb-30
            >
                <el-step v-for="(item, index) in timelineDatas"
                         :key="index"
                         :title="item.processName"
                         :description="item.processDateTime"
                />
            </el-steps>

            <div class="mb-30 w-1/2">
                <el-descriptions>
                    <el-descriptions-item label="订单编号：">
                        <span id="orderId"
                              mr-3
                              vertical-middle
                        >{{ orderData.orderCode }}</span>

                        <el-button type="primary"
                                   link
                                   @click="doCopy"
                        >
                            复制
                        </el-button>
                    </el-descriptions-item>

                    <el-descriptions-item label="下单时间：">
                        {{ orderData.createTime }}
                    </el-descriptions-item>
                </el-descriptions>
            </div>

            <h2 class="module-title">
                订单明细
            </h2>

            <el-row class="order-details mb-30">
                <el-col :span="9">
                    <h3 class="module-sub-title">
                        收货人信息
                    </h3>

                    <el-descriptions :column="1">
                        <el-descriptions-item label="收货人姓名：">
                            {{ orderData.receiverName ?? '-' }}
                        </el-descriptions-item>

                        <el-descriptions-item label="收货人电话：">
                            {{ orderData.receiverTel ?? '-' }}
                        </el-descriptions-item>

                        <el-descriptions-item label="收货人地址：">
                            {{ orderData.orderAddress ?? '-' }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>

                <el-col :span="5">
                    <h3 class="module-sub-title">
                        配送信息
                    </h3>

                    <el-descriptions :column="1">
                        <el-descriptions-item label="配送方式：">
                            {{ orderData.spuDelivery === 1 ? '快递' : '闪送' }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>

                <el-col :span="4">
                    <h3 class="module-sub-title">
                        付款信息
                    </h3>

                    <el-descriptions :column="1">
                        <el-descriptions-item label="支付方式：">
                            {{ getDictLabel('oPayType', orderData.targetSys) }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>

                <el-col v-if="'cancelReason' in orderData"
                        :span="6"
                >
                    <h3 class="module-sub-title">
                        订单状态
                    </h3>

                    <el-descriptions :column="1">
                        <el-descriptions-item label="状态："
                                              label-class-name="w-5em"
                        >
                            {{ getDictLabel('oOrderStatus', orderData.orderStatus) }}
                        </el-descriptions-item>

                        <el-descriptions-item label="取消原因："
                                              label-class-name="w-5em"
                        >
                            {{ orderData.cancelReason === 1 ? '手动取消' : '超时未支付' }}
                        </el-descriptions-item>
                    </el-descriptions>
                </el-col>
            </el-row>

            <h2 class="module-title">
                商品信息
            </h2>

            <vxe-grid m-b20
                      v-bind="detailsGridOptions"
            >
                <template #goodsInfo="{ row }">
                    <div class="flex items-center">
                        <el-image v-if="row.skuImgPath"
                                  class="mr-5 w-50"
                                  :src="row?.skuImgPath"
                                  :preview-src-list="[row?.skuImgPath]"
                                  fit="contain"
                        />

                        <span class="line-clamp-2 text-#da0004 text-left flex-1 cursor-pointer"
                              @click="toGoodsDetail(row)"
                        >{{ row.skuName }}</span>
                    </div>
                </template>

                <template #discount="{ row }">
                    <p>{{ row.orderDiscountAmount }}</p>

                    <!-- <p class="text-#da0004">
                    {{ row.commodityDiscount || '-' }}
                </p> -->
                </template>

                <template #payAmount="{ row }">
                    <span>
                        {{ row.orderPaidAmount }}
                    </span>
                </template>

                <template #orderStatus="{ row }">
                    <span>
                        {{ getDictLabel('oOrderStatus', row.orderLineStatus) }}
                    </span>
                </template>

                <template #operate="{ row }">
                    <vxe-button v-if="row.orderLineStatus === 1"
                                content="发货"
                                type="text"
                                style="color: #da0004;"
                                @click="clickShipmentsBtn(orderData, row.orderLineId)"
                    />

                    <!-- <vxe-button v-else-if="row.orderLineStatus === 2"
                                content="物流信息"
                                type="text"
                                style="color: #da0004;"
                                @click="lookDelivery(row)"
                    /> -->
                </template>
            </vxe-grid>

            <div class="bottom-info-box">
                <div>
                    <div class="mb-10 text-right flex">
                        <div class="text-#aaa fw-700 w-6em">
                            商品总额：
                        </div>

                        <div class="w-80">
                            ¥{{ orderData.orderTotalAmount }}
                        </div>
                    </div>

                    <div class="mb-10 text-right flex">
                        <div class="text-#aaa fw-700 w-6em">
                            运费：
                        </div>

                        <div class="w-80">
                            ¥{{ orderData.spuPost }}
                        </div>
                    </div>

                    <div class="mb-10 text-right flex">
                        <div class="text-#aaa fw-700 w-6em">
                            优惠：
                        </div>

                        <div class="w-80">
                            ¥{{ orderData.orderTotalDiscountAmount }}
                        </div>
                    </div>

                    <div class="mb-15 text-right flex">
                        <div class="text-#aaa fw-700 w-6em">
                            安居豆抵扣：
                        </div>

                        <div class="w-80">
                            ¥{{ orderData.douPost }}
                        </div>
                    </div>

                    <div class="text-right flex">
                        <div class="text-black fw-700 w-6em">
                            实收金额：
                        </div>

                        <div class="text-red fw-700 w-80">
                            ¥{{ orderData.orderFinalAmount }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="flex justify-center">
                <el-button @click="$router.go(-1)">
                    返回
                </el-button>
            </div>
        </template>
    </el-card>

    <DeliveryDialog v-if="showDelivery"
                    v-model:id="detailId"
                    v-model:visible="showDelivery"
                    :data="detailData"
    />

    <ShipmentsDialog v-if="showShipments"
                     v-model:visible="showShipments"
                     :data="detailData"
                     :order-line-id="orderLineId"
    />
    <!-- @success="getList" -->
</template>

<style lang="less" scoped>
.module-title {
    position: relative;
    padding-left: 20px;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;

    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        display: block;
        width: 5px;
        height: 26px;
        background: #da0004;
    }
}

.module-sub-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
}

:deep(.el-descriptions__label) {
    margin-right: 0;
}

.order-details {
    :deep(.el-descriptions__label) {
        font-weight: 700;
        color: #aaa;
        text-align: right;
    }

    :deep(.w-5em) {
        display: inline-block;
        width: 5em;
    }
}

:deep(.table-row) {
    background: unset;
}

.bottom-info-box {
    display: flex;
    justify-content: end;
    margin-bottom: 30px;
}
</style>
